<template>
  <el-container>
    <el-header>
      <el-menu :default-active="$route.path" router mode="horizontal">
        <el-menu-item><img  style="position: absolute;width: 125px;margin-top: 10px;" src="../assets/img.png" @click="toHomePage()" alt></el-menu-item>
        <el-menu-item style="margin-left: 200px;font-size: 17px;color: #2874cb;padding-top: 25px;">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path: '/mainPage'}">我的课堂</el-breadcrumb-item>
            <el-breadcrumb-item>课程内容</el-breadcrumb-item>
          </el-breadcrumb>
        </el-menu-item>
        <div class="h-right">
          <div style="float: left;"><a href="https://ktp.paper880.com/" style="text-decoration: none;color: black;"><i class="el-icon-search"></i>论文查重</a></div>
          <div>
            <span style="margin-left: 25px;cursor:pointer;" @click="toTaskManagement"><i class="el-icon-document"></i>任务管理</span>
            <span style="margin: 0 12px;"><i class="el-icon-bell"></i></span>欢迎您,
            <el-dropdown>
              <span class="el-dropdown-link"><i class="el-icon-s-custom"></i>{{this.userInfo.name}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="goSettings()"><i class="el-icon-s-tools"></i>个人设置</span></el-dropdown-item>
                <el-dropdown-item><span @click="logout()"><i class="el-icon-remove"></i>退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-menu>
    </el-header>
    <el-main>
      <header style="width: 1224px;height: 264px;margin: auto;">
        <div style="width:1224px;height: 200px;background-color:skyblue;border-radius: 8px 8px 0 0;">
          <img  style="border-radius: 8px 8px 0 0;" src="../assets/33.png" alt>
          <div  style="color: #fafafa;position:absolute;margin: -200px 25px;" class="header-top">
            <h1 style="font-size: 36px">{{course.courseName}}</h1>
            <h2 style="margin-top: -25px;">{{course.className}}</h2>
            <img src="https://www.ketangpai.com/img/qr.0b314396.svg" style="width: 16px;margin-top: 25px"><span>加课码:{{courseId}}&nbsp&nbsp已有{{course.membersCount}}人加入</span>
            <el-button disabled="disabled" style="border-radius: 25px;margin-left: 800px"><el-icon class="el-icon-video-play"></el-icon>  暂无课程</el-button>
          </div>
        </div>
        <div style="background-color: #fafafa;height: 64px;border-radius: 0 0 8px 8px;">
          <el-menu  :default-active="$router.path" router mode="horizontal">
            <el-menu-item  index="/courseContent" style="font-size: 25px;color: black;margin-left: 300px;">课程学习</el-menu-item>
            <el-menu-item  index="/singleStudentAnalysis" style="font-size: 25px;color: black;">学情分析</el-menu-item>
            <el-menu-item  index="/gradesManagement" style="font-size: 25px;color: black;">成绩管理</el-menu-item>
            <el-menu-item  index="/courseMessage" style="font-size: 25px;color: black;">课程介绍</el-menu-item>
          </el-menu>
        </div>
      </header>
        <router-view/>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";

export default {
  name: "classDetail",
  data() {
  return {
    userInfo: null,
    courseId: '',
    course: ''
};
},
  methods: {
    toHomePage() {
      this.$router.push("/homePage")
    },
    toTaskManagement(){
      this.$router.push("/taskManagement")
    },
    goSettings() {
      this.$router.push("/settings")
    },
    logout() {
      localStorage.removeItem('userInfo')
      this.$router.push("/login")
    },
  },
  mounted() {
    // 在组件加载时从LocalStorage中获取用户信息
    const userInfoString = localStorage.getItem('userInfo');
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
    }
    this.courseId = this.$route.params.courseId;
    let url = "http://localhost:8081/course/selectById";
    axios.post(url,{
      courseId: this.courseId
    }).then(response =>{
      this.course = response.data;
      localStorage.setItem("course",JSON.stringify(this.course));
    })
  }
}
</script>

<style scoped>

.h-right{
  float: right;
  width: 490px;
  margin-top: 25px;
  font-size: 17px;
}
.el-dropdown-link{
  cursor:pointer;
  color: #409EFF;
}
</style>
